<%@ include file="/WEB-INF/views/public/include.jsp"%>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
	<!-- 页面编码 -->
	<meta charset="utf-8">
  	<!-- 手机浏览器禁止缩放, 页面大小默认为手机屏幕宽度 -->
  	<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
  	<!-- 允许IOS全屏显示网页 -->
  	<meta content="yes" name="apple-mobile-web-app-capable" />
  	<!-- 设置IOS状态栏为透明底色 -->
	<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
	<!-- 设置360浏览器渲染引擎为webkit -->
  	<meta name="renderer" content="webkit">
  	<!-- 关闭自动识别电话号码 -->
  	<meta name="format-detection" content="telephone=no">
  	<!-- 页面标题 -->
  	<title>绑定手机号</title>

  	<!-- 基本样式载入 -->
  	<link rel="stylesheet" href="/resources/static/css/ionicons.min.css">
	<link rel="stylesheet" href="/resources/static/css/public.css">
	<!-- 基本脚本载入 -->
	<script src="/resources/static/js/plugins.min.js"></script>
</head>
<body>
	<div id="app" class="site" data-controller="bindPage">
		<div class="bar bar-footer bar-primary">
			<nav class="bar-navigation">
				<a class="menu-item" href="/main/index">
					<i class="menu-icon ico-home"></i>
					<span class="menu-label">首页</span>
				</a>
				<a class="menu-item" href="/main/discovery">
					<i class="menu-icon ico-discovery"></i>
					<span class="menu-label">发现</span>
				</a>
				<a class="menu-item is-active">
					<i class="menu-icon ico-me"></i>
					<span class="menu-label">我的</span>
				</a>
			</nav>
			<!-- END .bar-navigation -->
		</div>
		<div id="content" class="site-content">
			<div class="inner">
				<div class="alert alert-info alert-top">为了给约见用户更完美的用户体验和保障约见流程的安全，约见用户从即日起需要绑定手机号码。请放心，青年电影志会严格保密您的个人信息，不会向任何第三方泄露。手机验证码三分钟内有效，请及时输入哦~</div>
				<c:if test="${param.get('error') == 'code_wrong'}">
					<div class="alert alert-danger alert-top">手机验证码有点问题哦！</div>
				</c:if>
				<form action="./bind.do" class="js-bindForm" method="post">
					<div class="list-block list-block-bordered">
						<ul>
							<li>
								<div class="item-content">
									<div class="item-inner">
										<c:choose>
											<c:when test="${param.get('phone') != null}">
												<input name="phone" value="${param.get('phone')}" type="tel" class="js-phone" placeholder="手机号">
											</c:when>
											<c:otherwise>
												<input name="phone" type="tel" class="js-phone" placeholder="手机号">
											</c:otherwise>
										</c:choose>
									</div>
									<!-- END .item-inner -->
								</div>
								<!-- END .item-content -->
							</li>
							<li>
								<div class="item-content">
									<div class="item-inner">
										<input name="code" type="number" name="code" class="js-required" placeholder="手机验证码">
										<div class="item-after">
											<button type="button" class="btn btn-sm btn-default js-send">发送验证码</button>
										</div>
									</div>
									<!-- END .item-inner -->
								</div>
								<!-- END .item-content -->
							</li>
						</ul>
					</div>
					<!-- END .list-block -->
					<div class="ml10 mr10">
						<button type="button" class="btn btn-success btn-block js-submit">绑定手机号</button>
					</div>
				</form>
				<!-- END .js-bindForm -->
			</div>
			<!-- END .inner -->
		</div>
		<!-- END #content -->
	</div>
	<!-- END #page -->
	<!-- 页面脚本载入 -->
	<script src="/resources/static/js/app.js"></script>
</body>
</html>